<template>
	<view id="ownerRule">

		<view class="vote-item" v-for="(item, index) in fileList">
			<view class="vote-mr">
				<view class="title">
					{{voteDetailInfo.community_name}}
					{{item.statute_state == 1 ? '业主规约' 
					: item.statute_state == 2 ? '议事规则'
					: item.statute_state == 3 ? '召开业主大会方案'
					: item.statute_state == 4 ? '认证委员方案'
					: item.statute_state == 5 ? '其他文件'
					: ''
					}}
				</view>
				<text class="middle">
					<image class="word" src="/static/vote/word.png"></image>
				</text>
				<text class="right" @click="viewDoctor(item.statute_img)">{{item.file_name}}</text>
				<view class="agree-btn" @click="viewComment(item)">
					查看评论
				</view>
				<u-collapse v-if="item.recordList.length>0">
					<u-collapse-item align="center" :open="false" :title="'查看旧版'">
						<view class="vote-mr" v-for="(item2,index) in item.recordList" :key="item2.id">
							<view class="title"> 第{{ index +1}}版 </view>
							<text class="middle">
								<image class="word" src="/static/vote/word.png"></image>
							</text>
							<text
								style="margin-left: 46rpx;font-weight:bold;color: #000000;">{{ item2.file_name }}</text>
							<view class="agree-btn" @click="viewComment(item2)">查看评论</view>
						</view>
					</u-collapse-item>
				</u-collapse>

			</view>
		</view>

		<view class="vote-item" style="margin-top: 20rpx;min-height: 40rpx;">

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				voteId: null, //表决id
				fileList: [],
				voteDetailInfo: {},
			}
		},
		onLoad(option) {
			this.voteId = option.id
			this.getFileList();
			//表决详情
			this.getVoteDetailInfoById();
		},
		methods: {
			getVoteDetailInfoById() {
				this.$requestYz.api.getVoteDetailInfo({
					id: this.voteId
				}).then(res => {
					if (res.data.data.voteInfo) {
						this.voteDetailInfo = res.data.data.voteInfo;
					}
				})
			},
			flagChange(val) {
				console.log(val.openFlag)
			},
			getFileList() {
				this.$requestYz.api.getFileList({
					essential_information_id: this.voteId,
				}).then(res => {
					this.fileList = res.data.data.datalist;
				})
			},
			//显示文档
			viewDoctor(url) {
				uni.downloadFile({
					url: url,
					success: function(res) {
						var filePath = res.tempFilePath;
						uni.openDocument({
							filePath: filePath,
							showMenu: true,
							success: function(res) {
								console.log('打开文档成功');
							},
							fail() {
								console.log('打开文档失败');
							}
						});
					}
				});
			},
			//查看评论
			viewComment(item) {
				console.log(item)
				uni.navigateTo({
					url: `/pages/vote/components/publicity/viewComment?id=${item.id}&file_name=${item.file_name}&file_url=${item.statute_img}&voteId=${item.essential_information_id}&fileType=${item.statute_state}`
				})

			}
		}
	}
</script>

<style lang="scss">
	$color: #999;
	$bold: bold;

	::v-deep .u-collapse-head {
		font-size: 32rpx !important;
		font-weight: bold !important;
		margin: 10rpx 46rpx;
	}

	#ownerRule {
		min-height: 100vh;
		height: auto;
		background-color: #f4f4f4;
		padding-top: 20rpx;

		.vote-item {
			width: 100%;
			min-height: 274rpx;
			background: #f4f4f4;
			padding: 20rpx 0;

			.vote-mr {
				padding: 30rpx 46rpx;
				background-color: #FFFFFF;
			}

			.vote-status {
				color: #427705;
				font-size: 28rpx;
				font-weight: bold;
				text-align: center;
			}

			.vote-line {
				width: 345px;
				height: 1px;
				border: 1px solid #EEEEEE;
				margin: 30rpx auto;
			}

			.title {
				font-size: 28rpx;
				font-weight: bold;
				margin-bottom: 30rpx;
			}

			.middle {
				margin: 30rpx 0;
			}

			.right {
				margin-left: 46rpx;
				color: #4C77F2;
				font-weight: $bold;
				text-decoration: underline;
			}

			.word {
				width: 80rpx;
				height: 90rpx;
				vertical-align: middle;
			}

			.agree-btn {
				width: 176rpx;
				height: 60rpx;
				background: linear-gradient(180deg, #76D904 0%, #417505 100%);
				border-radius: 44rpx;
				color: #fff;
				text-align: center;
				line-height: 31px;
				margin-left: 72%;
			}
		}
	}
</style>